<script setup lang='ts'>
import TimeLine from './TimeLine/index.vue'
import CountCard from './CountCard/index.vue'
import PushGraph from './PushGraph/index.vue'
import { ref, onMounted } from 'vue'
import type { Ref } from 'vue'
import useMenuStore from '@/store/modules/menu'
import { getGit } from '@/api/git'
import { Git } from '@/api/git/types/index'
defineOptions({
    name: 'Home'
})
const menuStore = useMenuStore()
const cardList = ref([
    {
        title: '特性总数',
        type: 'feat',
        num: 0,
        compared: '10%',
        icon: 'icon-anli'
    },
    {
        title: '修复次数',
        type: 'fix',
        num: 0,
        compared: '10%',
        icon: 'icon-jiasu'
    },
    {
        title: '提交次数',
        type: 'total',
        num: 0,
        compared: '10%',
        icon: 'icon-shangchuan'
    },
    {
        title: '菜单总数',
        type: 'menuTotal',
        num: 0,
        compared: '10%',
        icon: 'icon-fenlei'
    },
])
const pageData: Ref<Git> = ref({
    result: [],
    total: 0,
    featNum: 0,
    fixNum: 0
})
onMounted(() => {
    getGit().then(res => {
        pageData.value = res
        cardList.value.forEach(item => {
            if (item.type === 'feat') {
                item.num = pageData.value.featNum
            } else if (item.type === 'fix') {
                item.num = pageData.value.fixNum
            } else if (item.type === 'total') {
                item.num = pageData.value.total
            } else {
                item.num = menuStore.menuTotal
            }
        })
    })
})
</script>

<template>
    <el-row :gutter="10" v-motion :initial="{
        opacity: 0,
        x: -100
    }" :enter="{
        opacity: 1,
        x: 0,
        transition: {
            delay: 80
        }
    }">
        <el-col class="top_col" :xl="6" :lg="6" :md="12" :sm="12" :xs="24" v-for="(content, index) in cardList">
            <CountCard :content="content"></CountCard>
        </el-col>

    </el-row>
    <el-row :gutter="10" v-motion :initial="{
        opacity: 0,
        x: -100
    }" :enter="{
        opacity: 1,
        x: 0,
        transition: {
            delay: 80
        }
    }">
        <el-col :xl="18" :lg="18" :md="24" :sm="24" :xs="24" class="bottom_col" :span="18">
            <PushGraph></PushGraph>
        </el-col>
        <el-col :xl="6" :lg="6" :md="24" :sm="24" :xs="24" class="bottom_col" :span="6">

            <TimeLine :list="pageData.result"></TimeLine>

        </el-col>
    </el-row>







</template>
<style lang='scss' scoped>
.top_col {
    margin-bottom: 10px;
}

.top_card {
    min-height: 160px;
}

.bottom_col {
    margin: 10px 0px;
}

.bottom_card {
    max-height: 600px;
}
</style>
